<template>
    <div>
        <el-card>
            <div slot="header">
                <span>【{{rowData.name}}】{{editTitle}}</span>
                <el-button style="float: right;margin-top: -6px;" size="medium" icon="el-icon-back"
                           @click="handleReBack">
                    返回
                </el-button>
            </div>
            <el-row :gutter="50">
                <el-col :span="8">
                    <el-card shadow="never">
                        <div slot="header">
                            <span>菜单权限&nbsp;&nbsp;<el-tooltip content="菜单权限不正确时，请点击右侧刷新按钮" placement="right">
                                <i class="el-icon-info"></i>
                                </el-tooltip>
                            </span>
                            <el-button style="float: right;margin-top: -10px;font-size: 20px" type="text"
                                       icon="el-icon-refresh"
                                       @click="handleSaveMenuPermission"/>
                        </div>
                        <el-tree ref="tree" :data="menusData" show-checkbox node-key="id" default-expand-all
                                 :check-on-click-node="true" @check="handleSaveMenuPermission"
                                 :expand-on-click-node="false"></el-tree>
                    </el-card>
                </el-col>
                <el-col :span="16">
                    <el-transfer ref="transfer" style="text-align: left; display: inline-block;" filterable
                                 v-model="checkedAuthList"
                                 :titles="['其他权限（未拥有）', '其他权限（已拥有）']" :button-texts="['删除', '添加']"
                                 @change="handleChange" :data="data">
                    </el-transfer>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "RolePermissionSetting",
        props: {
            editTitle: {
                type: String,
                default: "提示信息"
            },
            rowData: {
                type: Object,
                required: false
            }
        },
        data() {
            return {
                loading: false,
                data: [],
                menusData: [],
                checkedAuthList: []
            }
        },
        methods: {
            //返回
            handleReBack() {
                this.$emit("callBackFromSub", false);
            },
            //根据key设置菜单树的选中状态
            setCheckedKeys(keys) {
                this.$refs.tree.setCheckedKeys(keys);
            },
            //保存菜单权限
            handleSaveMenuPermission() {
                this.handleSavePermission(this.$refs.tree.getCheckedKeys(), this.rowData.id, 'menu');
            },
            //保存其它权限
            handleChange(value, direction, movedKeys) {
                this.handleSavePermission(this.checkedAuthList, this.rowData.id, 'other');
            },
            handleSavePermission(arr, roleId, type) {
                this.$httpPost(this.$axiosBaseHttp, "api/rest/auth/role/save", {
                    permissionId: arr,
                    roleId: roleId,
                    type: type
                }).then(res => {
                    if (res.code === 200) {
                        this.$successMsg(this.editTitle + "成功");
                    } else {
                        this.$errorMsg(this.editTitle + "失败");
                    }
                    this.loading = false;
                });
            },
            //获取权限列表
            authList() {
                //查询所有权限数据
                this.$httpGet(this.$axiosBaseHttp, "api/rest/auth/list", {}).then(res => {
                    if (res.code === 200) {
                        this.data = res.data.map(o => {
                            return {
                                key: o.id,
                                label: o.name
                            }
                        });
                    } else {
                        this.data = [];
                    }
                });
                //根据角色拥有的权限
                this.$httpGet(this.$axiosBaseHttp, "api/rest/auth/role/" + this.rowData.id, {}).then(res => {
                    if (res.code === 200) {
                        //其它权限
                        this.checkedAuthList = res.data.filter(o => {
                            return o.type === "other"
                        }).map(o => {
                            return o.permissionId;
                        });
                        //菜单权限
                        let checkedMenuList = [];
                        res.data.filter(o => {
                            return o.type === "menu"
                        }).map(o => {
                            checkedMenuList.push(o.permissionId);
                        });
                        this.setCheckedKeys(checkedMenuList);
                    } else {
                        this.checkedAuthList = [];
                    }
                });
                //从查询所有菜单树
                this.$httpGet(this.$axiosBaseHttp, "api/rest/menuInfo/tree", {}).then(res => {
                    if (res.code === 200) {
                        this.menusData = res.data;
                    } else {
                        this.menusData = [];
                    }
                });
            }
        },
        mounted() {
            this.authList();
        }
    }
</script>

<style scoped lang="scss">
    @media screen and (max-width: 1200px) {
        /deep/ .el-col-16, .el-col-8 {
            width: 100%;
        }
    }

    .el-col {
        /deep/ .el-card__header {
            padding: 9px 20px;
            background: #f5f7fa;
        }

        /deep/ .el-card__body {
            height: calc(100vh - 265px);
            overflow-y: auto;
        }
    }

    /deep/ .el-transfer-panel {
        width: 300px;
    }

    /deep/ .el-transfer-panel__body {
        height: calc(100vh - 280px);
    }

    /deep/ .el-transfer-panel__list.is-filterable {
        height: calc(100vh - 330px);
        padding-top: 0;
    }

    /*修改滚动条样式--start*/
    /deep/ .el-transfer-panel__list::-webkit-scrollbar, /deep/ .el-card__body::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        display: none;
    }

    /deep/ .el-transfer-panel__list::-webkit-scrollbar-track, /deep/ .el-card__body::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    /deep/ .el-transfer-panel__list::-webkit-scrollbar-thumb, /deep/ .el-card__body::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
    }

    /deep/ .el-transfer-panel__list::-webkit-scrollbar-thumb:hover, /deep/ .el-card__body::-webkit-scrollbar-thumb:hover {
        background: rgba(39, 161, 255, 0.92);
    }

    /deep/ .el-transfer-panel__list::-webkit-scrollbar-corner, /deep/ .el-card__body::-webkit-scrollbar-corner {
        background: rgba(39, 161, 255, 0.92);
    }

    /*修改滚动条样式--end*/
</style>